<template>
	<div class="hot-product">
		<div class="popular_title_box">
			<span class="popular_title">热门推荐</span>
		</div>
		<lazy-component>
			<div class="products" v-if="hotProData.length">
				<div class="products_item" v-for="(item,index) in hotProData" @click="$router.push({name: 'Detail', params: {pid:item.pid} })">
					<div class="pro-img">
						<div class="label" v-if="item.isHot">Hot</div>
						<img v-lazy="item.smallImg" :alt="item.name">
					</div>
					<div class="pro-info">
						<div class="pro_name Text_abb">{{item.name}}</div>
						<div class="pro_desc Text_abb">{{item.desc}}</div>
						<div class="pro_price">￥{{item.price}}</div>
					</div>
				</div>
			</div>
			<!-- <div class="no-data" v-else>
				<img src="//img.yzcdn.cn/vant/empty-image-default.png" alt="">
				<p>暂时没有热门推荐,去逛一下其他的吧!</p>
			</div> -->
			<van-empty description="暂时没有热门推荐,去逛一下其他的吧!" v-else />
		</lazy-component>
	</div>
</template>

<script>
	import {
		getHotPro
	} from '@/api/home.js'
	export default {
		name: 'Hot-product',
		data () {
			return {
				hotProData: [] // 热门商品数据数组
			}
		},
		created () {
			this._getHotPro()
		},
		methods: {
			// 获取热门商品
			_getHotPro() {
				getHotPro({
					key: "isHot",
					value: 1
				})
				.then(res => {
					console.log('热门商品',res)
					if(res.data.code !== 500) return this.$toast.fail('请求异常,请重新尝试!')
					this.hotProData = res.data.result
				})
				.catch(err => {
					return this.$toast.fail('请求失败,请重新尝试！')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-product {
		margin: 10px;

		.popular_title_box {
			background-color: #fff;
			border-radius: 30px 0 30px 0;
			height: 42px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 8px 1px #ccc;
			margin-bottom: 10px;

			.popular_title {
				font-weight: bold;
				font-size: 18px;
			}
		}

		.products {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: 10px;

			.products_item {
				width: calc(50% - 5px);
				background-color: #fff;
				padding: 8px;
				box-sizing: border-box;
				border-radius: 15px;
				box-shadow: 1px 1px 5px 1px #ccc;

				.pro-img {
					position: relative;

					.label {
						position: absolute;
						top: 0;
						left: 7px;
						background-color: #3498db;
						color: #fff;
						padding: 2px 3px;
					}

					img {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.pro-info {
					margin-top: 8px;

					.pro_name {
						color: #34495e;
						font-weight: bold;
						font-size: 18.75px;
					}

					.pro_desc {
						font-size: 15px;
						font-weight: bold;
						margin: 5px 0;
					}

					.pro_price {
						color: #3498db;
						font-size: 15px;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	.no-data{
		width: 100%;
		img{
			width: 160px;
			height: 160px;
			margin: auto;
		}
		p{
			text-align: center;
			margin-top: 16px;
			color: #969799;
			font-size: 14px;
			line-height: 20px;
		}
	}
</style>
